<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文献阅读器</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <!-- 顶部工具栏 -->
        <div class="toolbar">
            <button id="load-data-btn" class="btn btn-primary">加载数据</button>
            <div class="sort-controls">
                <label for="sort-select">排序方式:</label>
                <select id="sort-select">
                    <option value="date">日期</option>
                    <option value="title">标题</option>
                    <option value="author">作者</option>
                    <option value="score">评分</option>
                </select>
                <label for="sort-order-select">排序顺序:</label>
                <select id="sort-order-select">
                    <option value="false">正序 ↑</option>
                    <option value="true">逆序 ↓</option>
                </select>
            </div>
        </div>

        <div class="main-content">
            <!-- 左侧关键词导航栏 -->
            <div class="sidebar">
                <div class="keyword-section">
                    <h3>关键词导航</h3>
                    <div id="keyword-tree" class="keyword-tree">
                        <!-- 关键词树结构将在这里动态生成 -->
                    </div>
                </div>
                
                <div class="selected-keywords-section">
                    <h3>已选关键词</h3>
                    <div id="selected-keywords" class="selected-keywords">
                        <!-- 已选关键词将在这里显示 -->
                    </div>
                </div>
            </div>

            <!-- 中间文章列表 -->
            <div class="article-list">
                <div class="list-header">
                    <h3>文章列表</h3>
                    <div class="article-count">共 <span id="article-count">0</span> 篇文章</div>
                </div>
                <div id="article-items" class="article-items">
                    <!-- 文章列表将在这里动态生成 -->
                </div>
            </div>

            <!-- 右侧文章详情 -->
            <div class="article-detail">
                <div id="article-detail-content" class="detail-content">
                    <div class="no-selection">请选择一篇文章查看详情</div>
                </div>
            </div>
        </div>
    </div>

    <script src="script.js"></script>
</body>
</html>